<template>
    <div class="user">
        <div class="userinfo">
            <p><span>姓名：</span> <span>{{userInfo.nickName}}</span></p>
            <p><span>电话：</span> <span>{{userInfo.userPhono}}</span></p>
            <p><span>会员号：</span> <span>{{userInfo.cardNumber}}</span></p>
            <p><span>会员级别：</span> <span>{{vip_level[userInfo.membershipGrade]}}</span></p>
            <!-- <p><span>地址：</span> <span>XXXXXXX</span></p> -->
        </div>
    </div>
</template>
<script>
import { watch,ref } from "vue"
import {queryUserInfo} from 'api/customer.js'

export default {
    props:{
        userInfo:{}
    },
    setup(props) {
        let vip_level = ref([,'普通会员','银卡会员','金卡会员','钻石会员'])
        return {
            vip_level
        }
    },
}
</script>
<style lang="scss" scoped>
.user{
    background: #F1F5F8;
    .userinfo{
        background: #FFFFFF;
        border-radius: 1.25rem /* 20/16 */;
        text-align: left;
        padding:.3125rem /* 5/16 */ .9375rem /* 15/16 */;
        font-size:.875rem /* 14/16 */;
        margin:.9375rem /* 15/16 */ .9375rem /* 15/16 */ 0 .9375rem /* 15/16 */;
        p:not(:last-child){
            border-bottom:1px solid #E5EBEF;
        }
        p{
            display: flex;
            justify-content: space-between;
        }
        span:nth-of-type(1){
            font-size: .9375rem /* 15/16 */;
            font-family: PingFang SC;
            font-weight: 400;
            color: #49596D;
            line-height: 2.5rem /* 40/16 */;
        }
        span:nth-of-type(2){
            font-size: .9375rem /* 15/16 */;
            font-family: PingFang SC;
            font-weight: 500;
            color: #101D34;
            line-height: 2.5rem /* 40/16 */;
        }
    }
}

</style>